<script setup lang="ts">
import { shallowRef, ref, reactive, computed, nextTick } from 'vue';
import auditDialog from '../components/auditDialog.vue';
import { shopproductList } from '@/common/api/productAudit';
import { useToastLoading } from '@/composables/useToastLoading';
import { showToast } from 'vant';

const auditDialogRef = shallowRef<InstanceType<typeof auditDialog>>();

const loading = ref(false);
const info = reactive({
  pid: '',
  title: '',
  memo: '',
  images: [],
});
const empty = JSON.stringify(info);
const disabled = computed(() => loading.value || !info.pid);

const onLoda = async () => {
  loading.value = true;
  try {
    const res = await shopproductList({ status: 0, psize: 1 });
    if (res.result.datalist.length) {
      info.pid = res.result.datalist[0].pid;
      info.title = res.result.datalist[0].title;
      info.memo = res.result.datalist[0].memo;
      info.images = res.result.datalist[0].images ? res.result.datalist[0].images.split(',') : [];
    } else {
      Object.assign(info, JSON.parse(empty));
      nextTick(() => {
        showToast('暂无更多');
      });
    }
  } catch {
    /** empty */
  } finally {
    loading.value = false;
  }
};
onLoda();
useToastLoading(loading);

const handleAudit = (status: '1' | '3') => {
  auditDialogRef.value?.open(info.pid, status);
};
</script>
<template>
  <div class="productAudit">
    <div class="pt-4">
      <van-cell-group inset>
        <van-cell title="商品主图" :border="false"> </van-cell>
        <div class="px-4">
          <van-swipe :autoplay="3000" indicator-color="white" v-if="info.images?.length">
            <van-swipe-item v-for="(src, index) in info.images" :key="index">
              <van-image width="100%" height="320px" radius="6" fit="contain" :src="src" />
            </van-swipe-item>
          </van-swipe>
          <van-skeleton-image v-else class="!w-full !h-[80vw]" />
        </div>
        <van-cell title="商品名称" :value="info.title" />
        <van-cell title="描述信息" :value="info.memo" />
      </van-cell-group>
      <div class="flex px-4 pt-8">
        <div class="flex-1">
          <van-button type="primary" block round @click="handleAudit('1')" :disabled="disabled">审核通过</van-button>
        </div>
        <div class="flex-1 ml-4">
          <van-button type="warning" block round @click="handleAudit('3')" :disabled="disabled">审核拒绝</van-button>
        </div>
      </div>
    </div>
    <!-- 商品审核弹窗 -->
    <auditDialog ref="auditDialogRef" @on-refresh="onLoda" />
  </div>
</template>
<style lang="less" scoped>
.productAudit {
  overflow-y: auto;
  background-color: #f6f6f6;
  min-height: 100%;
  padding-bottom: 20px;
}
</style>
